<template>
  <view class="my-settle">
    <!-- 全选 -->
    <label class="radio" @click="checkState">
      <radio color="#C00000" :checked="funkChecked" /><text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{checkGoodsAmount}}</text>
    </view>
    <!-- 结算 -->
    <view class="btn-settle" @click="settlement">
      结算({{checkCount}})
    </view>
  </view>
</template>

<script>
  import { mapGetters,mapMutations, mapState} from 'vuex'
  export default {
    name:"my-settle",
    data() {
      return {
        changeAllState:true,
        seconds:3,
        timer: null
      };
    },
    computed: {
      ...mapGetters('m_cart',['checkCount','total','checkGoodsAmount']),
      ...mapState('m_user',['token','address']),
      ...mapState('m_cart',['cart']),
      // 是否全选
      funkChecked() {
        return this.checkCount === this.total
      }
    },
    methods: {
      ...mapMutations('m_cart',['updateAllState']),
      ...mapMutations('m_user',['updateReairect']),
      checkState() {
        this.changeAllState = !this.changeAllState
        this.updateAllState(this.changeAllState)
      },
      settlement() {
        if(!this.checkCount) return uni.$showMsg('请选择要结算的商品!')
        
        if(JSON.stringify(this.address) === '{}') return uni.$showMsg('请选择收货地址!')
        // if(!this.token) return uni.$showMsg('请登录后结算!')
        if(!this.token) {
          return this.delayNavigate()
        }
        // 实现微信支付
        this.payOrder()
      },
     async payOrder() {
       // 创建订单
        const payInfo = {
          order_price: 0.01,
          consignee_addr:this.address,
          goods:this.cart.filter(item => item.goods_state).map(item2=> ({
            goods_id:item2.goods_id,
            goods_number:item2.goods_count,
            goods_price:item2.goods_price
          }))
        }
      const {data:result} = await uni.$http.post('my/orders/create',payInfo)
      // if(result.meta.status !== 200) {
      //   return uni.$showMsg('后台出现错误，努力修复中～')
      // }
      const payOrder = {
              timeStamp: new Date().getTime().toString(),
              nonceStr: "SReWbt3nEmpJo3tr",
              appid:'wxae5ed532b0fded3c',
              package: "Sign=WXPay", 
              sign: "A842B45937F6EFF60DEC7A2EAA52D5A0",
              paySign: "3A6943C3B865FA2B2C825CDCB33C5304"
      }
     const [err,success] = await uni.requestPayment({
       provider: "wxpay",
     },payOrder)
     console.log(err)
    if(err) return uni.$showMsg('订单支付失败')
    uni.showToast({
      title:'订单支付完成',
      icon:'success'
    })
      },
      showTips(n) {
        uni.showToast({
          icon:'none',
          title:'请登录后再结算!' + n + '秒后自动跳到登录页',
          mask:true,
          duration:1500
        })
      },
      // 延时提示
      delayNavigate() {
        this.seconds = 3
        this.showTips(this.seconds)
       this.timer =  setInterval(() => {
          this.seconds--;
          if(this.seconds <= 0) {
            clearInterval(this.timer)
            uni.switchTab({
              url:'/pages/my/my',
              success:() => {
                this.updateReairect({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
            return
          }
           this.showTips(this.seconds)
        },1000)
      }
    }
  }
</script>

<style lang="scss">
.my-settle {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding-left: 5px;
  width: 100%;
  height: 50px;
  font-size: 14px;
  .radio {
    display: flex;
    align-items: center;
  }
  .amount-box {
    .amount {
      color: #C00000;
      font-weight: bold;
    }
  }
  .btn-settle {
    background-color: #C00000;
    height: 100%;
    color: #fff;
    line-height: 50px;
    padding: 0 10px;
    min-width: 100px;
    text-align: center;
  }
}
</style>